<template>
  <div>
      <div class="footers">
          <router-link :to="item.paths" v-for="(item,index) in menuArr" :key="index">
            <img :src="$route.path==item.paths?item.fullimgPath:item.imgPath" />
            <span :class="$route.path==item.paths?'active':''">{{item.titles}}</span>
          </router-link>
      </div>
  </div>
</template>

<script>

import homeimg from '../../assets/image/tabbar/home.png';
import homeFullimg from '../../assets/image/tabbar/homeFull.png';
import cateimg from '../../assets/image/tabbar/cate.png';
import cateFullimg from '../../assets/image/tabbar/cateFull.png';
import shopimg from '../../assets/image/tabbar/shop.png';
import shopFullimg from '../../assets/image/tabbar/shopFull.png';
import userimg from '../../assets/image/tabbar/user.png';
import userFullimg from '../../assets/image/tabbar/userFull.png';

export default {
   data(){
      return{
        menuArr:[
            {
                paths:'/shop',
                titles:'商城',
                imgPath:homeimg,
                fullimgPath:homeFullimg
            },
            {
                paths:'/cate',
                titles:'分类',
                imgPath:cateimg,
                fullimgPath:cateFullimg
            },
            {
                paths:'/cart',
                titles:'购物车',
                imgPath:shopimg,
                fullimgPath:shopFullimg
            },
            {
                paths:'/mine',
                titles:'我的',
                imgPath:userimg,
                fullimgPath:userFullimg
            }                                    
        ]
      }
   }
}
</script>

<style scoped>
.footers{
    position: fixed;
    left:0;
    bottom: 0;
    width:100vw;
    height: 60px;
    background-color: antiquewhite;
    border-top: 1px solid grey;
    display: flex
}

.footers a{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footers img {
    width: 30px;
    height: 30px;
}

.active{
    color:red;
}
</style>